<template>
  <div>
    <div class="read-header">
        <p>
          <span class="fuzhu"></span>
          阅读 | {{title}}
        </p>
    </div>
    <div class="read-list">
        <div class="read-item" v-for="item in form" :key="item.id">
            <a href="javascript:void(0);" @click="newsDeatil(item.id)" class="read-title">{{item.title}}</a>
            <p class="author"><span>By/Bu偷腥的mao</span></p>
            <span class="hr"></span>
            <p class="introduce">
              {{item.introduction.substring(0,120)}}……
            </p>
            <div class="read-bottom">
            </div>
        </div>
    </div>
    <el-pagination
    background
    layout="prev, pager, next"
    @current-change="changePage"
    :current-page="page"
    :total="pageTotal">
  </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Array,
      default: function () {
        return []
      }
    },
    title: {
      type: String,
      default: 'Read'
    },
    pageTotal: {
      type: Number,
      default: 1
    },
    page: {
      type: Number,
      default: 1
    }
  },
  methods: {
    newsDeatil (id) {
      this.$store.dispatch('addIp', {
        data: {
          id: id
        },
        cb: (res) => {
          if(res.data.code === 20000) {
            this.$router.push(
            {
              name: 'readDetail',
              query: {
                id : id
              }
            }
          )
          }else {
            res.$message.error(res.data.msg)
          }
        }
      })

    },
    changePage (p) {
      this.$emit('changePage', p)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .read-header
    margin-top 20px
    p
      vertical-align middle
      .fuzhu
        display inline-block
        width 16px
        height 16px
        background-color #333
        margin-right 10px
  .read-list
    margin-top 20px
    .read-item
      padding: 20px
      background-color #fff
      border-bottom: 1px solid #f5f5f5
      margin-bottom 20px
      box-shadow 1px 1px 0px 1px #eee
      &:hover
        transform scale(1.02)
        background-color #f8f8f8
      .read-title
          font-size: 20px
          color: #333
      .introduce
          font-size: 12px
          padding-top: 10px
          line-height: 20px
          word-break break-all
          text-overflow ellipsis
          display -webkit-box
          -webkit-box-orient vertical
          -webkit-line-clamp 2
          overflow hidden
          color #999
      .author
        padding-top: 6px
        span
          font-size: 12px
          color #ccc
      .hr
        display inline-block
        width 32px
        height 1px
        background-color #333

</style>
